<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>编辑档案信息</title>
    <link rel="stylesheet" type="text/css" href="${params.contextPath}/common/ztree/css/zTreeStyle/zTreeStyle.css"/>
<#include "/common/resource.ftl">
<#include "/common/upload.ftl">
    <script type="text/javascript" src="${params.contextPath}/common/ztree/js/jquery.ztree.all.min.js"></script>
    <style type="text/css">
    .panel-header{background: #fafafa;}
    .imgList{padding-top: 10px;}
    .imgItem{text-align: center;width: 100px;position: relative;float: left;margin-right: 10px;margin-bottom: 10px;}
    .imgItem img{width: 100px;height: 100px;}
    .imgItem span{position:absolute;left:0;color:#fff; top:82px;width: 100px;text-align: center;background-color:rgba(0,0,0,0.5);white-space: nowrap;overflow: hidden;text-overflow:ellipsis;}
    .imgItem a{margin-top: 3px;color: blue;text-decoration: underline;}
    </style>
    <script type="text/javascript">
        $(function () {
        <#if (params.id)??>
            $.ajaxRequest({
                url: '${params.contextPath}/web/archive/getById.json',
                data: {id: "${params.id}"},
                success: function (data) {
                    if (!data.success) {
                        $.message(data.message);
                        return;
                    }
                    var record = data.data;
                    for (var key in record) {
                        $("[name='" + key + "']").val(record[key]);
                    }
                    $("#categoryName").val(record.categoryName);
                    if(record.attachmentList){
                        $(record.attachmentList).each(function (i,item) {
                            var imgId = item.attachmentId;
                            var imgSize = item.size;
                            var imgUrl = "${params.contextPath}/web/attachment/download/{0}.json".format(imgId);
                            var content = '<div style="margin:5px 0px;">';
                            content += '<span><input type="hidden" value="{imageId}" name="fileIds"/></span>';
                            content += '<a href="{imageUrl}" target="_blank"><i class="AddFile AddBefImg">{imageName}({imageSize})</i></a>';
                            content +='<a onclick="$(this).parent().remove()">&nbsp;<font color="red">删除</font></a></div>';
                            content = content.format({imageId:imgId, imageUrl:imgUrl, imageName:item.originalName, imageSize:imgSize});
                            $("#select-file-button").before(content);
                        });
                    }
                }
            });
        </#if>
      //文件上传
   		$.upload({uploadSuccess:function(file, data){
				if (!data.success) {
					$.message(data.message);
					return;
				}
			var item = $.parseJSON(data._raw).data[0];
			var imgId = item.id;
			var imgSize = FileUtils.formatSize(file.size);
			var imgUrl = "${params.contextPath}/web/attachment/download/{0}.json".format(imgId);

			var content = '<div style="margin:5px 0px;">';
				content += '<span><input type="hidden" value="{imageId}" name="fileIds"/></span>';
                content += '<a href="{imageUrl}" target="_blank"><i class="AddFile AddBefImg">{imageName}({imageSize})</i></a>';
				content +='<a onclick="$(this).parent().remove()">&nbsp;<font color="red">删除</font></a></div>';

				content = content.format({imageId:imgId, imageUrl:imgUrl, imageName:item.name, imageSize:imgSize});
				$("#select-file-button").before(content);
   		}});
        });
    </script>
</head>
<body class="easyui-layout" fit="true" border="false">


    <div data-options="region:'east',split:true" title="基本信息" border="false" style="width:400px;">
    	<div class="ui-form">

		    <form class="layui-form my-form" action="${params.contextPath}/web/archive/<#if (params.id)??>modify<#else>save</#if>.json" method="post">
		        <input type="hidden" name="id" value="${params.id}"/>
		        <input type="hidden" name="images" value=""/>
		        <div class="layui-form-item">
		            <label class="layui-form-label">档案名称<span class="ui-request">*</span></label>
		            <div class="layui-input-block">
		                <input type="text" class="layui-input" placeholder="请输入区域名称" name="name">
		            </div>
		        </div>
		        <div class="layui-form-item">
		            <label class="layui-form-label">档案编号<span class="ui-request">*</span></label>
		            <div class="layui-input-block">
		                <input type="text" class="layui-input" style="background: #f4f4f4;color: #666;" value="<#if (params.id)??><#else>DA${.now?string("yyyyMMddHHmmss")}</#if>" name="code" readonly="readonly">
		            </div>
		        </div>
		        <div class="layui-form-item">
	                <label class="layui-form-label">档案分类</label>
	                <div class="layui-input-block ui-more-parent">
	                    <input type="hidden" name="categoryId" id="categoryId" value=""/>
	                    <input type="text" class="layui-input select-tree" readonly="readonly" id="categoryName" p="check:false,id:'#categoryId',name:'#categoryName',url:'${params.contextPath}/web/archivesCategory/tree.json'"/>
	                </div>
	            </div>

		        <div class="layui-form-item">
		            <label class="layui-form-label">说明</label>
		            <div class="layui-input-block">
		                <textarea class="layui-textarea" name="remark" placeholder="档案说明，可输入200个字符" maxlength="200"></textarea>
		            </div>
		        </div>
		        <div class="layui-form-item">
		            <label class="layui-form-label">附件</label>
		            <div class="layui-input-block">
		                <a id="select-file-button">添加文件</a>
		            </div>
		        </div>
		        <div class="layui-form-item">
		            <div class="layui-input-block">
		                <input type="submit" value="保存" class="layui-btn"/>
		            </div>
		        </div>
		    </form>
		</div>
    </div>
    <div data-options="region:'center',title:'扫描件'" border="false" style="padding: 10px">
    	<div style="line-height: 30px;border-bottom: 1px solid #ddd;padding-bottom: 10px;">
   		<input type="submit" value="打开高拍仪扫描" class="layui-btn"/>
   		</div>

        <div id="imgList" class="imgList" style="">
        	<div class="imgItem">
        		<input type="hidden" name="attachmentId" value="dsasfd"/>
        		<img src="${params.contextPath}/images/img09.png" />
        		<span>这里显示文字这里显示文字这里显示文字</span>
        		<a href="javascript:void(0)" onclick="$(this).parent().remove()" >[删除]</a>
        	</div>
        </div>
    </div>
</body>
<script>
    $(function(){
        $(".my-form").unbind().submit(function(){
            var images = [];
            $("#imgList .imgItem").each(function(i,item){
                var attachmentId = $(item).find("input[name='attachmentId']").val();
                var image = {attachmentId:attachmentId,ordernum:i};
                images.push(image);
            });
            $("input[name='images']").val(JSON.stringify(images));
            var form = $(this);
            form.formSubmit();
            return false;
        });
    });
</script>
</html>
